<template>
    <view class="content-wrapper">
        <view v-if="data.AuditRemark">
            <content-title :title="data.Status==2?'驳回理由':'备注信息'" />
            <view class="reason"
                >{{data.AuditRemark}}</view
            >
            <dashed-bottom />
        </view>
        <view>
            <content-title title="图片" />
            <view class="image-wrapper">
                <image
                    class="image"
                    @click="previewImage(index)"
                    v-for="(img, index) in data.ImgUrlArr"
                    :key="index"
                    :src="img"></image>
            </view>
            <dashed-bottom />
        </view>
        <view>
            <content-title title="晒单商品" />
            <view class="img-container" v-if="data.DetailList.length > 0">
                <img-list :list="data.DetailList" @open="handleOpenPopup" />
            </view>
            <view class="price-wrapper">
                <view class="text" v-if="getTotalReward.totalIntegral > 0">预计奖励积分：</view>
                <price v-if="getTotalReward.totalIntegral > 0" :price="getTotalReward.totalIntegral" />
				<view  v-if="getTotalReward.totalPrice > 0" class="text">预计奖励金额：</view>
				<price v-if="getTotalReward.totalPrice > 0" :price="getTotalReward.totalPrice" />
            </view>
            <dashed-bottom />
        </view>
        <view>
            <content-title title="申请信息" />
            <view class="info-wrapper">
                <view class="text">申请时间：</view>
                <view>{{data.AddTime}}</view>
            </view>
			<view class="info-wrapper">
			    <view class="text">联系方式：</view>
			    <view>{{data.ContactTel}}</view>
			</view>
        </view>
        <product-popup ref="popup" :list="data.DetailList" />
    </view>
</template>

<script>
import contentTitle from "./content-title.vue"
import dashedBottom from "./dashed-bottom.vue"
import imgList from "../common/img-list.vue"
import price from "../common/price.vue"
import productPopup from "../common/product-popup.vue"
import shuijiao from "@/pages_me/static/img/shuijiao.jpg"

export default {
	props:{
		data: {
		   type: Object,
		   default: {},
		},
	},
    components: {
        contentTitle,
        dashedBottom,
        imgList,
        price,
        productPopup,
    },
	computed:{
		getTotalReward() {
			let total = {
			    totalIntegral: 0,
			    totalPrice: 0
			}
			this.data.DetailList.forEach((res)=>{
				if(res.RewardType==1){
					total.totalIntegral += res.Reward * res.Amount
				}else{
					total.totalPrice += res.Reward * res.Amount
				}
			})
			total.totalIntegral = total.totalIntegral.toFixed(2)
			total.totalPrice = total.totalPrice.toFixed(2)
		    return total
		},
	},
    data() {
        return {
            
        }
    },
    methods: {
        //预览图片
        previewImage(current) {
            uni.previewImage({
                current,
                urls: this.data.ImgUrlArr,
            })
        },
        handleOpenPopup() {
            this.$refs.popup.openModal()
        },
    },
}
</script>

<style lang="scss">
.content-wrapper {
    margin: 28rpx 24rpx;
    padding-bottom: 24rpx;
    border-radius: 20rpx;
    background-color: #fff;

    .reason {
        margin: 0 24rpx 24rpx;
        color: #e01212;
        font-size: 28rpx;
    }

    .image-wrapper {
        display: flex;
        flex-wrap: wrap;
        padding-left: 24rpx;

        .image {
            width: 120rpx;
            height: 120rpx;
            margin-right: 24rpx;
            margin-bottom: 24rpx;
            border-radius: 8rpx;
        }
    }

    .img-container {
        margin: 24rpx 24rpx 60rpx;
    }

    .price-wrapper {
        display: flex;
        align-items: center;
        padding-left: 24rpx;
        padding-bottom: 8rpx;

        .text {
            font-size: 24rpx;
        }
    }

    .info-wrapper {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        padding-left: 24rpx;
        margin-bottom: 8rpx;

        .text {
            color: $color-gray-3;
        }
    }
}
</style>
